//***配置基准地址
axios.defaults.baseURL = 'https://apipc-xiaotuxian-front.itheima.net/';
// 1.获取li li1 li2
const li1 = document.querySelector('.xtx_navs li:first-child')
// console.log(li1)
const li2 = li1.nextElementSibling
// console.log(li2);
// 2.修改li的内容render 函数
function render() {
    // 2.1 获取本地数据
    let uname = localStorage.getItem('uname')
    // console.log(uname);
    // console.log(uname);
    if (uname) {
        li1.innerHTML = `<a href="javascript:;">
       <i class="iconfont icon-user"></i>
       ${uname}
       </a>`
        li2.innerHTML = `<a href="javascript:;">退出登录</a>`
    } else {
        li1.innerHTML = `<a href="./login.html">
       请先登录
       </a>`
        li2.innerHTML = `<a href="./register.html">免费注册</a>`
    }
    //登录状态再发请求
    //*** 新鲜好物的渲染
    axios({
        method: 'get',
        url: '/home/new',
        params: {
            limit: 4
        }
    }).then(res => {
        // console.log(res);
        //渲染新鲜好物
        let str = res.data.result.map((item) => {
            return `
                <a href="javascript:;">
                  <img src="${item.picture}" alt="" />
                  <span class="name">${item.name}</span>
                  <span class="price"><small>￥</small>${item.price}</span>
                </a>
                `
        }).join('')
        document.querySelector('.xtx_panel_goods_1').innerHTML = str
    }).catch(err => {
        console.log(err);
    })

    
    //*** 二级标题的渲染
    axios({
        method: 'get',
        url: '/home/category/head'
    }).then(res => {
        console.log(res);
        // 一起渲染
        let str = res.data.result.map((item) => { 
            return `
            <!-- 基础模板 -->
            <!-- 顶级的 标题 -->
            <li>
              <a href="javascript:;">${item.name}</a>
              <!-- 二级标题 -->
              <ul class="sub">
                ${item.children.map(item => { 
                    return `
                    <li>
                      <a href="javascript:;">
                        <img src="${item.picture}"
                          alt="" />
                        <span>${item.name}</span>
                      </a>
                    </li>
                    `
                }).join('')}
              </ul>
            </li>
            `
        }).join('')

        // let str = res.data.result.map((item) => {
        //     return `
        //     <!-- 基础模板 -->
        //     <!-- 顶级的 标题 -->
        //     <li>
        //       <a href="javascript:;">${item.name}</a>
        //     </li>
        //     `
        // }).join('')
        document.querySelector('.top').innerHTML = str
    }).catch(err => {
        console.log(err);
    })
}
render()

// 3.退出登录
li2.addEventListener('click', function () {
    // 3.1 清空本地数据
    //localStorage.setItem('userInfo', JSON.stringify({}))
    localStorage.removeItem('token')
    localStorage.removeItem('uname')
    //跳回登录页面
    location.assign('./login.html')
    // 3.2 重新调取render函数
    // render()
})